<html>
 <head>
  <title>YouTube Duplicate Video Finder - Search Page</title>
  <style type="text/css">
  	fieldset { font-family: Arial; margin: 25 auto; text-align: center; width: 550px; border-style: solid; border-color: black; padding: 10px }
	legend { font-size: 25px; font-weight: bold; font-variant: small-caps }
	.buttons { border-style: solid; border-color: #666666; background-color: #EEEEEE }
	.buttons2 { border-style: solid; border-color: #666666; background-color: #EEEEEE; margin-bottom: 3px; margin-top: 2px }
	.texts { border-style: solid; border-color: #666666; background-color: #EEEEEE; padding-left: 2px; padding-right: 2px }
	.texts2 { border-style: solid; border-color: #666666; background-color: #EEEEEE; padding-left: 2px; padding-right: 2px; margin-bottom: 3px; margin-top: 2px }
	#tolerance { border-style: solid; border-color: #666666; background-color: #EEEEEE; padding-left: 2px; padding-right: 2px }
	#errorDiv { border-style: solid; border-color: red; margin-left: 5px; margin-right: 5px; margin-top: 15px }
    #tube { color: white; background-color: red; padding-left: 3px; padding-right: 3px }
  	.defaultDiv { margin-bottom: 5px; margin-top: 5px }
  </style>
  <script src="../../prototypeServer/" type="text/javascript"></script>
  <script src="../../sliderServer/" type="text/javascript"></script>
  <script language="javascript" type="text/javascript">
	function checkId() {
      new Ajax.Request('../functionServer',{
       method: 'get',
        parameters: { 'function': 'checkId', 'devId': $F('searchDeveloperId') },
        onComplete: idReceived
      });
    }

    function getVideoCount() {
	  new Ajax.Request('../functionServer',{
	    method: 'get',
	    parameters: { 'function': 'getVideoCount', 'tag': $F('searchTerm'), 'tolerance': $F('tolerance') },
	    onComplete: videoCountReceived
	  });
    }

    function setVideoCount() {
 	  new Ajax.Request('../functionServer',{
	    method: 'get',
	    parameters: { 'function': 'setVideoCount', 'count': $F('userCount') },
	    onComplete: videoCountSet
	  });
    }

    function idReceived(response) {
	  if (response.responseText == 'valid id') {
		hideError();
		getVideoCount();
	  }
	  else {
		$('errorDiv').update('Invalid developer id.');
		showError();
	  }
	}

    function videoCountReceived(response) {
	  if (response.responseText == '0') {
		$('errorDiv').update('No videos returned.');
		showError();
	  }
	  else {
		hideSearch();
		$('promptText').update('The search returned ' + response.responseText + ' number of videos. What would you like to do?');
		showPrompt();
	  }
	}

	function videoCountSet(response)
	{
	  if (response.responseText == 'invalid number') {
		$('errorDiv').update('Invalid video count.');
		showError();
	  }
	  else {
		moveNext();
	  }
	}

	function moveNext() {
	  new Ajax.Request('../functionServer',{
	    method: 'get',
	    parameters: { 'function': 'moveNext' },
	    onComplete: moveNextComplete
	  });
	}

	function moveNextComplete() {
	  window.location = '../../downloadServer/pageServer/';
	}

    function hideSearch() {
	  $('searchDiv').hide();
	}

	function showSearch() {
	  $('searchDiv').show();
	}

    function hidePrompt() {
	  $('promptDiv').hide();
	}

	function showPrompt() {
	  $('promptDiv').show();
	}

	function hideGetUserCount() {
	  $('getUserCountDiv').hide();
	}

	function showGetUserCount() {
	  $('getUserCountDiv').show();
	}

	function hideError() {
	  $('errorDiv').hide();
	}

	function showError() {
      $('errorDiv').show();
	}
  </script>
 </head>
 <body onLoad='hidePrompt(); hideGetUserCount(); hideError(); slide();'>
  <fieldset>
  <legend>You<span id="tube">Tube</span> Duplicate Video Finder</legend>
  <div id="searchDiv">
	 <div class="defaultDiv">
	   Search term: <input type="text" name="searchTerm" id="searchTerm" class="texts" size=51>
	 </div>
	 <div class="defaultDiv">
	   Developer id: <input type="text" name="searchDeveloperId" id="searchDeveloperId" class="texts" size=20 value="KWE26Ie-JYM">
	   <input type="text" id="tolerance" name="tolerance" value="30%" size=15 class="slider">
	   <input type="button" name="searchButton" id="searchButton" class="buttons" value="Search" onClick='checkId();'>
	 </div>
  </div>
  <div id="promptDiv">
    <div id="promptText" class="defaultDiv">
      The search returned x number of videos. What would you like to do?
    </div>
	<div>
	  <input type="button" name="promptContinueButton" id="promptContinueButton" class="buttons2" value="Continue & Download All" onClick='moveNext();'>
	  <input type="button" name="promptCancelButton" id="promptCancelButton" class="buttons2" value="Cancel" onClick='hidePrompt(); showSearch();'>
	  <input type="button" name="promptUserButton" id="promptUserButton" class="buttons2" value="Enter a User Specified Number" onClick='hidePrompt(); showGetUserCount();'>
    </div>
  </div>
  <div id="getUserCountDiv">
	<div class="defaultDiv">
	  Enter the number of videos to retrieve.
	</div>
	<div>
	  <input type="text" class="texts2" name="userCount" id="userCount" size=10>
	  <input type="button" name="userContinueButton" id="userContinueButton" class="buttons2" value="Continue" onClick='setVideoCount();'>
	  <input type="button" name="userCancelButton" id="userCancelButton" class="buttons2" value="Cancel" onClick='hideGetUserCount(); showPrompt();'>
    </div>
  </div>
  <div id="errorDiv" class="defaultDiv">
    Error!
  </div>
  </fieldset>
 </body>
</html>